<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小说内容页</title>
    <script rel="stylesheet" src="/js/jquery.js"></script>
    <script rel="stylesheet" src="/js/modal.js"></script>
    <script rel="stylesheet" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font/bootstrap-icons.css}">
    <style type="text/css">
        #contents{
            width: 80%;
            margin: auto;
        }
        #contents a{
            color:black;
        }
        #contents a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="contents">
    <!--导航栏-->
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <h4 class="navbar-nav mr-auto" style="font-weight: bold;padding-right: 10px;">
                    <a th:href="'/user/index'"><i class="bi bi-book"></i>&nbsp; 茄子小说网</a>
                </h4>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li th:each="types, iterStat : ${typeList}" class="nav-item">
                            <a th:href="'/user/toMain?typeId='+${types.typeId}+'&typeName='+${types.typeName}"
                               th:text="${types.typeName}" target="myIframe" class="nav-link"></a>
                        </li>
                    </ul>

                    <ul class="nav justify-content-end" th:if="${session.user==null}">
                        <li class="nav-item">
                            <a id="loginModel" type="button" class="btn" onclick="loginModelShow()">登录</a>
                        </li>
                        <li class="nav-item">
                            <a type="button" class="btn" onclick="registerModelShow()">注册</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                    </ul>
                    <ul class="nav justify-content-end" th:if="${session.user!=null}">
                        <li class="nav-item">
                            <a class="nav-link" th:text="'欢迎您  '+${session.user.getUsername()}">xx</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="'/user/exit'">退出</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!--搜索框-->
    <div class="row">
        <div class="col-md-12" style="height: 200px">
            <form class="form-inline" style="padding-left: 30%;;padding-top: 90px">
                <div class="form-group ">
                    <input type="text" class="form-control" id="inputFictionName" placeholder="修真聊天群"
                           style="width: 500px">
                </div>
                <button id="searchFictionButton" onclick="searchFiction()" type="button" class="btn btn-outline-info">
                    <i class="bi bi-search"></i>
                    搜索
                </button>
            </form>
        </div>
    </div>
    <div style="width: 60%;margin: 0 auto">
        <div class="row">
            <div class="col-md-12">
                <blockquote class="blockquote text-center">
                    <h3 class="mb-0" th:text="${chapterTitle}"></h3>
                </blockquote>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-md-12">
                <h5 th:utext="${#strings.replace(content.contents,' ','<br><br>')}"></h5>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-md-12 text-center">
                <button type="button" class="btn btn-outline-primary">上一章</button>
                <button type="button" class="btn btn-outline-primary" style="margin-left: 20px;">返回目录</button>
                <button type="button" class="btn btn-outline-primary" style="margin-left: 20px;">下一章</button>
                <button type="button" class="btn btn-outline-primary" style="margin-left: 20px;">加入书架</button>
            </div>
        </div>
    </div>

    <hr/>
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <div th:include="common/footer :: footer"></div>
        </div>
    </div>
</div>

</body>
</html>